<template>
  <div class="app-container">

    <!-- 添加或修改询价单对话框 -->

    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="询报价需求选择" prop="inquirynumber"  >
        <el-button icon="el-icon-coin" @click="handleAdd" style="margin-left: 20px;width: 230px" >选择数据</el-button>
      </el-form-item>
      <el-form-item label="询报价需求编号">
        <el-input placeholder="暂无内容"  v-model="DemandNumber" :disabled="multiple" style="margin-left: 20px;width: 230px"/>
      </el-form-item>
      <el-dialog :title="title" :visible.sync="open" width="1035px" append-to-body>
        <el-table :data="formList" highlight-current-row @current-change="handleSelectionChange" style="width: 1664px">

          <el-table-column label="询报价需求编号" align="center" prop="inquiryDemandNumber" width="180"/>
          <!--      <el-table-column label="询价id" align="center" prop="inquiryId" />-->
          <!--      <el-table-column label="询报价需求" align="center" prop="inquiryDemand" />-->
          <el-table-column label="采购明细">
            <el-table-column label="采购申请编号"  width="180">
              <template slot-scope="scope" >
                <div v-for="(requestnumber,index) in scope.row.pcmApplicationDetailList"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center">
                  {{requestnumber.purchaseRequestNumber}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="产品编号" width="140" >
              <template slot-scope="scope">
                <div v-for="(requestnumber,index) in scope.row.pcmApplicationDetailList"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center">
                  {{requestnumber.productNumbera.productNumber}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" width="140">
              <template slot-scope="scope">
                <div v-for="(requestnumber,index) in scope.row.pcmApplicationDetailList"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center">
                  {{requestnumber.productNumbera.productName}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单位" width="140">
              <template slot-scope="scope">

                <div v-for="(requestnumber,index) in scope.row.pcmApplicationDetailList"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 15px 0px 16px 0px;text-align: center">
                  <dict-tag :options="dict.type.sys_unit" :value="requestnumber.productNumbera.unit"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="需求行号" width="140">
              <template slot-scope="scope">
                <div v-for="(requestnumber,index) in scope.row.pcmApplicationDetailList"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center">
                  {{requestnumber.demandLineNumber}}

                </div>
              </template>
            </el-table-column>
            <el-table-column label="需求数量" width="140">
              <template slot-scope="scope">
                <div v-for="(requestnumber,index) in scope.row.pcmApplicationDetailList"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center">
                  {{requestnumber.requiredQuantity}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="期望到货日期" width="140">
              <template slot-scope="scope">
                <div v-for="(requestnumber,index) in scope.row.pcmApplicationDetailList"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center">
                  {{requestnumber.expectedDeliveryDate}}
                </div>
              </template>
            </el-table-column>
          </el-table-column>

        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-dialog>
      <el-divider content-position="center">询报价需求信息</el-divider>

      <el-table :data="inquiryDemandList2"  border style="width: 1101px">

        <el-table-column type="index" width="80"/>
        <!--      <el-table-column label="询价id" align="center" prop="inquiryId" />-->
        <!--      <el-table-column label="询报价需求" align="center" prop="inquiryDemand" />-->
        <el-table-column label="采购申请编号" width="180" prop="purchaseRequestNumber"/>

        <el-table-column label="产品编号" width="140" prop="productNumber"/>

        <el-table-column label="产品名称" width="140"  prop="productName"/>

        <el-table-column label="单位" width="140" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_unit" :value="scope.row.unit"/>
          </template>
        </el-table-column>
        <el-table-column label="需求行号" width="140" prop="demandLineNumber"/>

        <el-table-column label="需求数量" width="140" prop="requiredQuantity"/>

        <el-table-column label="期望到货日期" width="140" prop="expectedDeliveryDate"/>

      </el-table>
      <el-form-item label="报价截止日期" style="margin: 80px 0px">
        <el-input :value="Deadline" style="margin-left: 20px;width: 230px" :disabled="multiple" placeholder="暂无内容"/>
      </el-form-item>
      <div class="zt" style="color: #606266;line-height: 17px;text-align: left;float: left;font-size: 15px;padding: 0 12px 0 17px;box-sizing: border-box;font-weight: 700;position: relative;" >最终价格上报<br>
<!--        <span style="color: #838892;font-size: 12px">只能选择成功互联供应商，1次操作不能超过200个供应商</span><br>-->
        <el-table border :data="SupplierQuotation2" style="width: 1650px">
          <el-table-column label="询报价需求编号" prop="inquiryDemandNumber" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.quotationID" placeholder="暂无数据" @focus="shenqingxiangq()"/>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" prop="pcmSupplier.supplierFullName" align="center"/>
          <el-table-column label="产品编号" prop="pcmQuotationProduct.quotationProductID" align="center"/>
          <el-table-column label="产品名称" prop="pcmQuotationProduct.productName" align="center"/>
          <el-table-column label="单位" prop="" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_unit" :value="scope.row.pcmQuotationProduct.unit"/>
            </template>
          </el-table-column>
          <el-table-column label="预计到货时间" prop="pcmQuotationProduct.estimatedDeliveryTime" align="center"/>
          <el-table-column label="最终价格" prop="pcmQuotationProduct.finalprice" align="center"/>
          <el-table-column label="第一次价格" prop="pcmQuotationProduct.firstQuotation" align="center"/>
          <el-table-column label="第二次价格" prop="pcmQuotationProduct.secondQuotation" align="center"/>
          <el-table-column label="第三次价格" prop="pcmQuotationProduct.thirdQuotation" align="center"/>
          <el-table-column label="价格开始时间" prop="" align="center">
            <template slot-scope="scope">
              <el-date-picker
                clearable
                v-model="scope.row.priceStartDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="" />
            </template>
          </el-table-column>
          <el-table-column label="价格结束时间" prop="" align="center">
            <template slot-scope="scope">
              <el-date-picker
                clearable
                v-model="scope.row.priceEndDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="" />
            </template>
          </el-table-column>
        </el-table><br>
        <span style="margin: 15px 0px;display: inline-block">参与供应商报价总数</span><br>
        <el-input placeholder="暂无内容" v-model="length" :disabled="multiple" />
        <div slot="footer" class="dialog-footer" style="text-align: left;margin-top: 100px" >
          <el-button type="primary" @click="chuangz" >确 定</el-button>
          <el-button @click="cancel">生成草稿</el-button>
          <el-button @click="shux">刷新</el-button>
        </div>
      </div><br>
      <el-dialog :title="title2" :visible.sync="flag" width="800px" append-to-body>
        <el-form>
          <el-form-item label="供应商名称" prop="supplierFullName">
            <el-input
              v-model="SupplierName.supplierFullName"
              placeholder="请输入供应商名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="sousuo()">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="SupplierQuotation" @selection-change="supplierSelectionChange" border style="width: 800px">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="询报价需求编号" prop="inquiryDemandNumber" align="center" width="130"/>
          <el-table-column label="供应商名称" prop="supplierFullName" align="center" width="120"/>
          <el-table-column label="产品编号" prop="productNumber" align="center" width="120"/>
            <!-- <template slot-scope="scope">
                  <div v-for="(requestnumber,index) in scope.row.pcmQuotationProduct"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center">
                    {{requestnumber.requiredQuantity}}
                  </div>
                </template>
          </el-table-column> -->
          <el-table-column label="产品名称" prop="productName" align="center" width="120"/>
          <el-table-column label="单位" prop="" align="center" width="120">
            <template slot-scope="scope">
              <!-- <div v-for="(requestnumber,index) in scope.row.pcmQuotationProduct"  style="border-top: 1px #dfe6ec solid;width: 100%;padding: 15px 0px 16px 0px;text-align: center">
                    <dict-tag :options="dict.type.sys_unit" :value="requestnumber.pcmMaterialRecord.unit"/>
                  </div> -->
              s<dict-tag :options="dict.type.sys_unit" :value="scope.row.unit"/>

            </template>
          </el-table-column>
          <el-table-column label="预计到货时间" prop="expectedDeliveryDate" align="center" width="120"/>
          <el-table-column label="最终价格" prop="finalprice" align="center" width="120"/>
          <el-table-column label="第一次价格" prop="firstQuotation" align="center" width="120"/>
          <el-table-column label="第二次价格" prop="secondQuotation" align="center" width="120"/>
          <el-table-column label="第三次价格" prop="thirdQuotation" align="center" width="120"/>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cz" >确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

    </el-form>


  </div>
</template>

<script>
import { listForm,listInquiry, getForm, delForm, addForm, updateForm,addAudit } from "@/api/inquiry/form";
import {getCheck,addPrice} from "@/api/inquiry/check";
import dict from "@/utils/dict";

export default {
  name: "Form",
  dicts: ['pcm_supplier_states','sys_type_purchase','demand_line_status','sys_unit','sys_sup_cat'],
  data() {
    return {
      // 遮罩层
      loading: true,
      inquirynumber:"",
      DemandNumber:"",
      Deadline:"",
      SupplierQuotation:[],
      SupplierQuotation2:[],
      SupplierQuotation3:[],

      SupplierName:{supplierFullName:""},
      flag:false,
      length:"",
      title2:"",
      // 选中数组
      ids: [],
      //选中询价单
      inquiryDemandList2:[],
      // 子表选中数据
      checkedPcmInquiryDemand: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 询价单表格数据
      formList: [],
      // 询报价需求表格数据
      pcmInquiryDemandList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      chuanzhi:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        inquirynumber: [
          { required: true },

        ],
      }
    };
  },
  created() {
    this.getList();
    let log={};
    log.quotationID="";
    log.pcmSupplier={supplierFullName:""};
    log.pcmQuotationProduct={
      quotationProductID:"",
      pcmMaterialRecord:{productName:"",unit:""},
      estimatedDeliveryTime:"",
      finalprice:"",
      firstQuotation:"",
      secondQuotation:"",
      thirdQuotation:""
    };
    log.priceStartDate=""
    log.priceEndDate=""
    this.SupplierQuotation2.push(log)

  },
  methods: {
    /** 查询询价单列表 */
    getList() {
      this.loading = true;
      listForm(this.queryParams).then(response => {
        this.formList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log(this.formList)
      });
    },
    // 取消按钮
    cancel() {
      this.flag = false;
      this.reset();
    },
    chuangz(){
      // if (this.SupplierQuotation2.quotationID!=null){
        addPrice(this.SupplierQuotation2).then(eow=>{
          this.$modal.msgSuccess("提交成功")
        })
      this.shux()
      // }else {
      //   this.$modal.msgSuccess("请添加报价详情数据");
      // }
    },
    // 表单重置
    reset() {
      this.form = {
        inquiryId: null,
        inquiryDemandNumber: null,
        inquiryDemand: null,
        inquirySuppliersId: null
      };
      this.pcmInquiryDemandList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    sousuo(){
      // let log={};
      // log.supplier_states="";
      // log.supplierFullName=this.SupplierName.supplierFullName;
      // log.supplyProductCategory="";
      // this.Supplierlist2.push(log)

      getForm(this.SupplierName).then(res=>{
        this.Supplierlist=res.rows;
        console.log(this.Supplierlist)
      })


    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection.inquiryDemandNumber)
      const bianhao=selection.inquiryDemandNumber
      console.log(bianhao)
      listInquiry(bianhao).then(res=>{
        this.inquiryDemandList2=res.rows
        this.DemandNumber=this.inquiryDemandList2[0].inquiryDemandNumber
        this.Deadline=this.inquiryDemandList2[0].quoteDeadline
        console.log(res)
      })
      this.open=false;
    },
    supplierSelectionChange(selection){
      console.log(selection)
      this.SupplierQuotation3=selection;
    },
    shux(){
      this.SupplierQuotation2=[];
      this.SupplierQuotation3=[];
      this.SupplierQuotation=[];
      this.inquiryDemandList2=[];
      this.inquirynumber="";
      this.SupplierName={supplierFullName: ""}
      this.length="";
      this.DemandNumber="";
      this.Deadline="";
      let log={};
      log.quotationID="";
      log.pcmSupplier={supplierFullName:""};
      log.pcmQuotationProduct={
        quotationProductID:"",
        pcmMaterialRecord:{productName:"",unit:""},
        estimatedDeliveryTime:"",
        finalprice:"",
        firstQuotation:"",
        secondQuotation:"",
        thirdQuotation:""
      };
      log.priceStartDate=""
      log.priceEndDate=""
      this.SupplierQuotation2.push(log)
    },
    shenqingxiangq(){
      this.title2="选择信息";
      this.flag=true;
      // console.log(this.inquiryDemandList2)
     getCheck(this.inquiryDemandList2[0].inquiryDemandNumber).then(res=>{
       this.SupplierQuotation=res.rows;
       console.log(this.SupplierQuotation)
     })
    },
    cz(){
      this.SupplierQuotation2= [];
      console.log(this.SupplierQuotation3)
      this.SupplierQuotation3.forEach(as=>{
        console.log(as)
        console.log("as")
        const ass={
          quotationID:as.inquiryDemandNumber,
          productNumber:as.productNumber,
          supplierID:as.quotingSupplier,
          effectivePrice:as.finalprice,
          priceStartDate:"",
          priceEndDate:"",
          pcmSupplier:{
            supplierID2:as.quotingSupplier,
            supplierFullName:as.supplierFullName
          },
          pcmQuotationProduct:{
            quotationProductID:as.productNumber,
            productName:as.productName,
            unit:as.unit,
            estimatedDeliveryTime:as.estimatedDeliveryTime,
            finalprice:as.finalprice,
            firstQuotation:as.firstQuotation,
            secondQuotation:as.secondQuotation,
            thirdQuotation:as.thirdQuotation
          }
        }

        this.SupplierQuotation2.push(ass);
      })

      this.length=this.SupplierQuotation2.length
      this.flag=false;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "询价需求详情";
      this.getList();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const inquiryId = row.inquiryId || this.ids
      getForm(inquiryId).then(response => {
        this.form = response.data;
        this.pcmInquiryDemandList = response.data.pcmInquiryDemandList;
        this.open = true;
        this.title = "修改询价单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.pcmInquiryDemandList = this.pcmInquiryDemandList;
          if (this.form.inquiryId != null) {
            updateForm(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addForm(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const inquiryIds = row.inquiryId || this.ids;
      this.$modal.confirm('是否确认删除询价单编号为"' + inquiryIds + '"的数据项？').then(function() {
        return delForm(inquiryIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 询报价需求序号 */
    rowPcmInquiryDemandIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 询报价需求添加按钮操作 */
    handleAddPcmInquiryDemand() {
      let obj = {};
      obj.inquiryId = "";
      obj.inquiryDemand = "";
      obj.quoteDeadline = "";
      this.pcmInquiryDemandList.push(obj);
    },
    /** 询报价需求删除按钮操作 */
    handleDeletePcmInquiryDemand() {
      if (this.checkedPcmInquiryDemand.length == 0) {
        this.$modal.msgError("请先选择要删除的询报价需求数据");
      } else {
        const pcmInquiryDemandList = this.pcmInquiryDemandList;
        const checkedPcmInquiryDemand = this.checkedPcmInquiryDemand;
        this.pcmInquiryDemandList = pcmInquiryDemandList.filter(function(item) {
          return checkedPcmInquiryDemand.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handlePcmInquiryDemandSelectionChange(selection) {
      this.checkedPcmInquiryDemand = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/form/export', {
        ...this.queryParams
      }, `form_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped>
::v-deep .el-table .cell{
  padding: 0px;
}
::v-deep .el-table--medium .el-table__cell{
  padding: 0px;
}
::v-deep .el-input.is-disabled .el-input__inner{
  color: #606266;
}
</style>
